<template>
  <div class="orders">
    <el-table
      ref="filterTable"
      :data="tableData"
      tooltip-effect="dark"
      style="width: 100%">

      <el-table-column
        prop="orderId"
        label="订单号"
        width="200">
        <template slot-scope="scope">
          <el-link :href="'/payment/' + scope.row.orderId">{{ scope.row.orderId }}</el-link>
        </template>
      </el-table-column>

      <el-table-column
        prop="userName"
        label="用户名"
        width="100">
      </el-table-column>

      <el-table-column
        prop="productName"
        label="商品名称"
        width="400">
        <template slot-scope="scope">
          <div style="display: flex; align-items: center;">
            <el-image
              v-if="scope.row.fromUrl"
              style="width: 100px; height: 100px;"
              :src="scope.row.productImgPath"
              fit="fill">
            </el-image>
            <el-image
              v-else
              style="width: 100px; height: 100px;"
              :src="require('@/assets/img/product/' + scope.row.productImgPath)"
              fit="fill">
            </el-image>
            <div style="margin: 30px;">
              <p>{{ scope.row.productName }}</p>
            </div>
          </div>
        </template>
      </el-table-column>

      <el-table-column
        prop="productPrice"
        label="商品价格"
        width="150">
      </el-table-column>

      <el-table-column
        prop="purchaseAmount"
        label="购买数量"
        width="150">
      </el-table-column>

      <el-table-column
        prop="productStock"
        label="商品库存"
        width="150">
      </el-table-column>

      <el-table-column
        prop="orderStatus"
        label="订单状态"
        width="150"
        :filters="[{ text: '已支付', value: '已支付' }, { text: '待支付', value: '待支付' }]"
        :filter-method="filterOrderStatus"
        filter-placement="bottom-end">
        <template slot-scope="scope">
          <el-tag
            :type="scope.row.orderStatus === '已支付' ? 'success' : 'warning'"
            disable-transitions>
            {{ scope.row.orderStatus }}
          </el-tag>
        </template>
      </el-table-column>

    </el-table>
  </div>
</template>

<script>
export default {
  name: "Orders",
  created() {
    this.userInfo = this.$store.getters.getUser;
    if (!this.userInfo || !this.userInfo.valid) {
      this.$message({
        message: '请先登录！',
        type: 'warning'
      });
      this.$router.push("/login");
      return;
    }
    let userId = this.userInfo.id;
    let _this = this;
    _this.$axios.get("/order-list-dto/user/" + userId).then(res => {
      let orderListDtos = res.data.data;
      for (let orderListDto of orderListDtos) {
        let imgPath = orderListDto.productImgPath;
        let fromUrl = false;
        if (imgPath.slice(0, 4) === "http") {
          fromUrl = true;
        }

        _this.tableData.push({
          orderId: orderListDto.orderId,
          userName: orderListDto.userName,
          productName: orderListDto.productName,
          productImgPath: imgPath,
          productPrice: orderListDto.productPrice,
          purchaseAmount: orderListDto.purchaseAmount,
          productStock: orderListDto.productStock,
          orderStatus: orderListDto.orderStatus,
          fromUrl: fromUrl
        })
      }

      console.log(_this.tableData);
    });
  },
  data() {
    return {
      userInfo: null,
      tableData: []
    }
  },
  methods: {
    filterOrderStatus(value, row) {
      return row.orderStatus === value;
    }
  }
}
</script>

<style scoped>

</style>